<template>
  <input
    type="text"
    class="ipt"
    v-model="value"
    @click="showlist"
    @change="iptchange"
    @keydown.up="prevone"
    @keydown.down="nextone"
  />
</template>

<script>
export default {
  data() {
    return {
      value: "",
      num: -1,
    };
  },
  methods: {
    showlist() {
      this.$emit("showstate", true);
    },
    iptchange() {
      this.$emit("getipt", this.value);
      //  this.value=''
    },
    prevone() {
      if (this.num > 0) {
        this.num--;
      } else {
        this.num = 0;
      }
      this.$emit("sendnum", this.num);
    },
    nextone() {
      if (this.num < this.$store.state.list.length-1) {
        this.num++;
      } else {
        this.num = 0;
      }
      this.$emit("sendnum", this.num);
    },
  },
};
</script>

<style lang="scss"scoped>
input {
  width: 100%;
  height: 40px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  outline: none;
  border: none;
  text-indent: 1em;
}
</style>